// 得分环
import { ChartStrategy } from "@@/composables/useECharts"
import { EChartsOption, SeriesOption } from "echarts"
import { GaugeDataItemOption } from "echarts/types/src/chart/gauge/GaugeSeries.js"

export class GaugeOptionStrategy implements ChartStrategy {
  getOptions(options: EChartsOption | null): EChartsOption {
    const seriesData = options && ((options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0]
    const resOptions: EChartsOption = {
      series: [
        {
          type: "gauge",
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: "#464646"
            }
          },
          axisLine: {
            lineStyle: {
              width: 25
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: [
            {
              value: seriesData && seriesData.value ? seriesData.value : 0,
              name: seriesData?.name,
              title: {
                offsetCenter: ["0%", "-12%"]
              },
              detail: {
                valueAnimation: true,
                offsetCenter: ["0%", "12%"]
              }
            }
          ],
          title: {
            color: "white",
            fontSize: 16
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 14,
            color: "inherit",
            borderColor: "inherit",
            borderRadius: 20,
            borderWidth: 1,
            formatter: "{value}%"
          }
        }
      ]
    }
    return resOptions
  }
}
